<template>
  <div>
    <a-modal v-model:visible="visible" @cancel="handleCancel">
      <template #title> 编辑账号 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item label="账号" field="account">
          <a-input v-model="form.account" placeholder="请输入账号"> </a-input>
          <template #extra>
            <div>将做为登录账号,默认初始密码123456</div>
          </template>
        </a-form-item>
        <a-form-item label="姓名" field="name">
          <a-input v-model="form.name" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="邮箱" field="email">
          <a-input v-model="form.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item label="角色" field="role">
          <a-select v-model="form.role" placeholder="请选择角色">
            <a-option value="admin">管理员</a-option>
            <a-option value="produce">生产科</a-option>
            <a-option value="blend">勾兑</a-option>
            <a-option value="supply">供应科</a-option>
            <a-option value="inventory">库房</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="saveuserInfo">确定</a-button>
        <!-- <a-button type="primary" @click="$refs.formRef.resetFields()">Reset</a-button> -->
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { registerUser } from '@/api/user';
import { Message } from '@arco-design/web-vue';

const visible = ref(false);

const openDialog = () => {
  visible.value = true;
};

const rules = {
  account: [
    {
      required: true,
      message: '请输入账号',
    },
  ],
  name: [
    {
      required: true,
      message: '请输入姓名',
    },
  ],
  role: [
    {
      required: true,
      message: '请选择角色',
    },
  ],
};

const formRef = ref(null);
const saveuserInfo = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid === undefined) {
      const {code,message} = await registerUser(form); 
      if(code === 200){
        Message.success(message)
        visible.value = false;
        formRef.value.resetFields();
      }
    }
  });
};

const form = reactive({
  account: '', // 账号
  name: '',
  email: '',
  role: '', // 角色
});
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
</style>
